@use 'sass:math';

:global(.logo-mark) {
    :global(.aqua) {
        fill: var(--color-logo-aqua);
    }

    :global(.orange) {
        fill: var(--color-logo-orange);
    }

    :global(.red) {
        fill: var(--color-logo-red);
    }

    :global(.grey) {
        fill: var(--color-logo-grey);
    }

    rect {
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-play-state: paused;
    }

    &:not(.bounce, .loading) rect {
        transform: translateX(0);
    }
}

.bounce rect[class*='right'] {
    $animation-duration: 1.15s;

    animation-name: logo-mark-bounce-right;
    animation-duration: $animation-duration;
    animation-play-state: running;

    &:global(.right-2) {
        animation-delay: math.div($animation-duration, 6);
    }

    &:global(.right-3) {
        animation-delay: math.div($animation-duration, 6) * 2;
    }
}

.loading rect[class*='right'] {
    $animation-duration: 1.25s;

    animation-name: logo-mark-bounce-right;
    animation-duration: $animation-duration;
    animation-play-state: running;

    &:global(.right-2) {
        animation-delay: math.div($animation-duration, 6);
    }

    &:global(.right-3) {
        animation-delay: math.div($animation-duration, 6) * 2;
    }
}

.loading rect[class*='left'] {
    $animation-duration: 1.25s;

    animation-name: logo-mark-bounce-left;
    animation-duration: $animation-duration;
    animation-play-state: running;

    &:global(.left-3) {
        animation-delay: math.div($animation-duration, 6) * 3;
    }

    &:global(.left-2) {
        animation-delay: math.div($animation-duration, 6) * 4;
    }

    &:global(.left-1) {
        animation-delay: math.div($animation-duration, 6) * 5;
    }
}

@keyframes logo-mark-bounce-right {
    0% {
        transform: translateX(0%);
    }

    16.6666% {
        transform: translateX(3px);
    }

    33.3333% {
        transform: translateX(0);
    }
}

@keyframes logo-mark-bounce-left {
    0% {
        transform: translateX(0%);
    }

    16.6666% {
        transform: translateX(-3px);
    }

    33.3333% {
        transform: translateX(0);
    }
}
